<template>
  <div class="top-btn">
    <div class="font-blue">基础信息</div>
    <!-- <el-button type="success">导入河道断面</el-button> -->
  </div>
  <div class="bottom">
    <el-tabs v-model="state.activeName">
      <el-tab-pane label="分区信息" name="first">
        <div class="tabs-box">
          <div class="region-info">
            <div class="region-info-top title1">当前区域信息</div>
            <div class="region-info-center title1">
              <div class="info-item">
                <span class="info-item-color">区域编码：</span>
                <span>{{ props.sectionObj.zoneCode || '--' }}</span>
              </div>
              <div class="info-item">
                <span class="info-item-color">区域名称：</span>
                <span>{{ props.sectionObj.zoneName || '--' }}</span>
              </div>
            </div>
            <div class="region-info-center title1">
              <div class="info-item1">
                <span class="item-title-width">最后输出断面：</span>
                <span>{{ props.sectionObj.outSection || '--' }}</span>
              </div>
            </div>
            <div class="region-info-center title1">
              <div class="info-item">
                <span class="info-item-color">单元级别：</span>
                <span>{{ props.sectionObj.depth || '--' }}</span>
              </div>
            </div>
          </div>
          <div class="region-info">
            <div class="region-info-top title1">父级区域设置</div>
            <div class="region-info-center title1">
              <div class="info-item">
                <span class="info-item-color">区域编码：</span>
                <span>{{ props.sectionObj.downZone || '--' }}</span>
              </div>
            </div>
            <div class="region-info-top title1">子级区域设置</div>
            <div class="region-info-center title1">
              <div class="info-item">
                <span class="info-item-color">区域编码：{{ props.sectionObj.upZone || '--' }}</span>
                <span>{{ props.sectionObj.upZone || '--' }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="河道断面信息" name="second">
        <div class="tabs-box">
          <el-table border :data="state.sectionData" style="width: 100%" height="100%">
            <el-table-column prop="name" label="断面名称" align="center" />
            <el-table-column prop="riverName" label="河流名称" align="center" />
            <!-- <el-table-column fixed="right" label="操作" width="200" align="center">
              <template #default>
                <el-button link type="primary" size="small">定位</el-button>
              </template>
            </el-table-column> -->
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="边界条件" name="third">
        <div class="tabs-box third-box">
          <div class="table-container">
            <el-table border :data="state.boundaryData" style="width: 100%" height="100%">
              <el-table-column
                prop="boundKey"
                label="模型边界关键字"
                align="center"
                width="130"
                show-overflow-tooltip="true"
              />
              <el-table-column
                prop="clnm"
                label="边界类型"
                align="center"
                width="110"
                show-overflow-tooltip="true"
              >
                <template #default="{ row }">
                  {{ convertBoundType(row.boundType) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="sourceCode"
                label="入流输入来源编码"
                align="center"
                width="130"
                show-overflow-tooltip="true"
              />
              <el-table-column
                prop="clnm"
                label="入流输入来源类型"
                align="center"
                width="130"
                show-overflow-tooltip="true"
              >
                <template #default="{ row }">
                  {{ row.sourceType == 0 ? '站点' : '河道' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="sourceSttp"
                label="站点类型"
                align="center"
                width="110"
                show-overflow-tooltip="true"
              />
              <el-table-column
                prop="ord"
                label="序号"
                align="center"
                width="70"
                show-overflow-tooltip="true"
              />
              <el-table-column
                prop="sourceName"
                label="水源名称"
                align="center"
                width="80"
                show-overflow-tooltip="true"
              />
              <el-table-column
                prop="upSection"
                label="上游输入断面"
                align="center"
                width="130"
                show-overflow-tooltip="true"
              />
              <el-table-column
                prop="zoneCode"
                label="预报区域ID"
                align="center"
                width="100"
                show-overflow-tooltip="true"
              />
              <el-table-column
                prop="remark"
                label="备注"
                align="center"
                width="100"
                show-overflow-tooltip="true"
              />
            </el-table>
          </div></div
      ></el-tab-pane>
    </el-tabs>
  </div>
  <!-- <div class="title">
    <div class="blu">参数设置</div>
  </div> -->
  <!-- <div class="peizhi">
    <div>
      <span>参数配置方案：</span>
      <el-select
        v-model="state.paramsItem"
        class="m-2"
        placeholder="请选择"
        @change="handleSelectName"
      >
        <el-option
          v-for="item in state.paramsList"
          :key="item.id"
          :label="item.scName"
          :value="item.id"
        />
      </el-select>
    </div>
  </div> -->
  <!-- <div class="top-btn">
    <div class="top-btn-title">
      <span>计算单元计算参数：</span>
      <el-input v-model="state.name" placeholder=""></el-input>

      <el-link v-if="state.url" type="success" :href="state.url" target="_blank"
        >下载参数文件</el-link
      >
    </div>
  </div> -->
</template>

<script setup>
import { reactive, watch } from 'vue'

import {
  getBoundList,
  getParamsSchemeList,
  // 查询河道断面信息
  getIfmsList
} from '@/services/modules/model-config.js'
const state = reactive({
  activeName: 'first',

  // 河道断面信息
  sectionData: [],
  // 边界条件
  boundaryData: [],
  // 参数配置方案
  paramsList: [],
  // 选中的方案
  paramsItem: '',
  // 选择的配置方案名称
  name: '',
  url: ''
})

const props = defineProps({
  // 点击左侧树 获取到的分区信息
  sectionObj: {
    type: Object,
    default: () => {}
  },
  // 流域信息
  zoneId: {
    type: Number,
    default: 1
  }
})
watch(
  () => {
    props.sectionObj
  },
  () => {
    // 根据预报分区获取水动力边界条件,参数配置方案
    acceptBoundList()
    // 当断面信息变更则清空配置参数名称和地址
    state.url = ''
    state.name = ''
  },
  {
    deep: true
  }
)
watch(
  () => {
    props.zoneId
  },
  () => {
    // 根据流域获取水动力边界条件,参数配置方案
    acceptBoundList()
  },
  {
    deep: true
  }
)
// 获取参数配置方案名称
const handleSelectName = (val) => {
  let arr = state.paramsList.filter((item) => {
    return item.id == val
  })
  state.name = arr[0].scName
  // 获取一维水动力参数配置方案下载地址
  state.url = arr[0].pm1Path
}
// 水动力边界条件,参数配置方案
const acceptBoundList = () => {
  state.paramsItem = ''
  getBoundList({
    modelType: props.sectionObj.modelType,
    zoneId: props.zoneId,
    zoneCode: props.sectionObj.zoneCode
  }).then((res) => {
    if (res.code == 200) {
      state.boundaryData = res.data
    }
  })
  getParamsSchemeList({
    modelType: props.sectionObj.modelType,
    zoneId: props.zoneId,
    zoneCode: props.sectionObj.zoneCode
  }).then((res) => {
    if (res.code == 200) {
      state.paramsList = res.data
    }
  })
  // 查询河道断面信息
  getIfmsList({
    modelType: props.sectionObj.modelType,
    zoneId: props.zoneId,
    zoneCode: props.sectionObj.zoneCode
  }).then((res) => {
    if (res.code == 200) {
      state.sectionData = res.data
    }
  })
}
// 查询河道断面信息
// const acceptSectionList = () => {
//   getIfmsList({
//     modelType: props.sectionObj.modelType,
//     zoneId: props.zoneId,
//     zoneCode: props.sectionObj.zoneCode
//   }).then(res => {

//   })
// }
// 边界类型转换
const convertBoundType = (val) => {
  switch (val) {
    case 0:
      return '入流取结果流量'
    case 1:
      return '取区间流量'
    case 2:
      return '上游输入'
    case 3:
      return '入流+上游输入'
    case 4:
      return '区间+上游输入'
    case 3:
      return '出流'
  }
}
</script>

<style lang="less" scoped>
.top-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 10px 10px 0px;
  font-size: 14px;
  .top-btn-title {
    width: 100%;
    display: flex;
    align-items: center;
    // font-size: 16px;
    font-weight: 600;
    .el-input {
      width: 400px;
      margin-right: 20px;
    }
  }
  .font-blue {
    color: #409eff;
  }
}
.bottom {
  display: flex;
  justify-content: space-between;

  height: calc(100% - 110px);
  width: 100%;
  padding: 0 20px 10px 0px;
  box-sizing: border-box;
  .el-tabs {
    height: 100%;
    width: 100%;
    :deep(.el-tabs__content) {
      height: calc(100% - 70px);
      .el-tab-pane {
        width: 100%;
        height: 100%;
      }
    }
    .tabs-box {
      width: 100%;
      // height: 100%;
      height: calc(100% - 15px);
      .region-info {
        display: flex;
        flex-direction: column;

        .region-info-top {
          margin-top: 10px;
          margin-bottom: 15px;
          font-size: 14px;
          // font-weight: 600;
          color: #409eff;
        }
        .region-info-center {
          display: flex;
          padding-left: 15px;
          margin-bottom: 20px;
          box-sizing: border-box;
          .info-item {
            width: 50%;
            .info-item-color {
              color: #797979;
            }

            .item-title {
              width: 100px;
              // color: #797979;
            }
          }
          .info-item1 {
            display: flex;

            width: 100%;
            .item-title-width {
              color: #797979;
              width: 110px !important;
              white-space: nowrap;
            }
          }
        }
      }
    }
    .third-box {
      .table-container {
        height: 100%;
      }
    }
  }
  .bianhao {
    width: 170px;
    height: 100%;
    background-color: #fff;

    .tit {
      height: 30px;
      width: 100%;
      background-color: #d3cdcd;
      text-align: center;
      line-height: 30px;
    }

    .list {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      height: calc(100% - 30px);
      width: 100%;
      overflow-y: auto;
      .list-item {
        height: 30px;
        line-height: 30px;
      }
    }
  }
}

.page {
  float: right;
  margin-top: 10px;
}

.title {
  display: flex;
  margin: 20px;

  .blu {
    color: var(--fold-word-color);
    margin-right: 20px;
  }
}

.peizhi {
  margin: 20px 0 20px 20px;
  display: flex;
  justify-content: space-between;
}

.m-2 {
  margin-left: 20px;
}

.btn {
  margin-right: 20px;
}

.bl {
  color: var(--fold-word-color);
  margin-left: 30px;
}
</style>
